<!DOCTYPE HTML>
<html>
<head>
    <title>Weather Station</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Import file names has to be not too long -->
    <link rel="stylesheet" href="css/jquerymobile145.css">
    <link rel="stylesheet" href="css/ws_style.css">

    <script type="text/javascript" src="go_setup/network_configs"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" src="js/jquery.mask.js"></script>
    <script type="text/javascript" src="js/sevenSeg.js"></script>
    <script type="text/javascript" src="js/ws_websocket.js"></script>
    <script type="text/javascript" src="js/ws_page_setup.js"></script>
</head>
<body onload="wsConnectC();" onunload="ws.disconnect;">
    <div data-role="page" id="navbar_home">
        <div data-role="header">
            <h1 class="ui-title" role="heading" aria-level="1">Weather Station</h1>
            <div class="ui-grid-c">
                <div class="ui-block-a">
                    <div style="margin:15px 0 0 10px;" id="label_connect">Not connected</div>
                </div>
                <div class="ui-block-b">
                </div>
                <div class="ui-block-c">
                    <label for="text-10" style="margin:15px 10px 0 0; text-align:right;">F/W Version : </label>
                </div>
                <div class="ui-block-d">
                    <div style="margin:15px 0 0 10px;" id="fwversion"></div>
                </div>
            </div>
        </div>

        <div data-role="content">
            <div class="ui-corner-all custom-cornors">
                <div class="ui-grid-a">
                    <div class="ui-block-a">
                        <div class="ui-bar ui-bar-a">
                            <span class="sevenseg_label">Temperature</span>
                            <span class="sevenseg_label_unit">&#8451;</span>
                        </div>
                        <div class="ui-body ui-body-a">
                            <div class="sevenseg_item" id="sevenseg_temperature"></div>
                        </div>
                    </div>
                    <div class="ui-block-b">
                        <div class="ui-bar ui-bar-a">
                            <span class="sevenseg_label">Humidity</span>
                            <span class="sevenseg_label_unit">%</span>
                        </div>
                        <div class="ui-body ui-body-a">
                            <div class="sevenseg_item" id="sevenseg_humidity"></div>
                        </div>
                    </div>
                </div>
                <br />
                <div class="ui-grid-a">
                    <div class="ui-block-a">
                        <div class="ui-bar ui-bar-a">
                            <span class="sevenseg_label">Pressure</span>
                            <span class="sevenseg_label_unit">hPa</span>
                        </div>
                        <div class="ui-body ui-body-a">
                            <div class="sevenseg_item" id="sevenseg_pressure"></div>
                        </div>
                    </div>
                    <div class="ui-block-b">
                        <div class="ui-bar ui-bar-a">
                            <span class="sevenseg_label">Altitude</span>
                            <span class="sevenseg_label_unit">m</span>
                        </div>
                        <div class="ui-body ui-body-a">
                            <div class="sevenseg_item" id="sevenseg_altitude"></div>
                        </div>
                    </div>
                </div>
                <br />
                <div class="ui-grid-a">
                    <div class="ui-block-a">
                        <div class="ui-bar ui-bar-a">
                            <span class="sevenseg_label">UV index</span>
                            <span class="sevenseg_label_unit"></span>
                        </div>
                        <div class="ui-body ui-body-a">
                            <div class="sevenseg_item" id="sevenseg_uvindex"></div>
                        </div>
                    </div>
                    <div class="ui-block-b">
                        <div class="ui-bar ui-bar-a">
                            <span class="sevenseg_label">Visible</span>
                            <span class="sevenseg_label_unit">Lux</span>
                        </div>
                        <div class="ui-body ui-body-a">
                            <div class="sevenseg_item" id="sevenseg_visible"></div>
                        </div>
                    </div>
                </div>
                <br />
                <div class="ui-grid-a">
                    <div class="ui-block-a">
                        <div class="ui-bar ui-bar-a">
                            <span class="sevenseg_label">IR</span>
                            <span class="sevenseg_label_unit">Lux</span>
                        </div>
                        <div class="ui-body ui-body-a">
                            <div class="sevenseg_item" id="sevenseg_ir"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="#navbar_home" data-icon="grid">Home</a>
                    </li>
                    <li><a href="#navbar_settings" data-icon="star">Settings</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div data-role="page" id="navbar_settings">
        <div data-role="header">
            <h1 class="ui-title" role="heading" aria-level="1">Weather Station</h1>
        </div>

        <div data-role="content">
            <div class="ui-body ui-body-a ui-corner-all">
                <h3>Network Settings</h3>
                <ul data-role="listview" data-inset="true">
                    <li class="ui-field-contain">
                        <label for="text_net_ipv4">IP Address</label>
                        <input type="text" id="text_net_ipv4" class="form-control">
                    </li>
                    <li class="ui-field-contain">
                        <label for="text_net_ssid">SSID</label>
                        <input type="text" id="text_net_ssid" class="form-control" maxlength="20">
                    </li>
                    <li class="ui-field-contain">
                        <label for="text_net_passwd">Password</label>
                        <input type="text" id="text_net_passwd" class="form-control" maxlength="20">
                    </li>
                    <li class="ui-body ui-body-b">
                        <fieldset class="ui-grid-a">
                            <div class="ui-block-a">
                                <input id="btn_save_network" value="Save" type="button">
                            </div>
                            <div class="ui-block-b">
                                <input id="btn_reset_network" value="Reset" type="button">
                            </div>
                        </fieldset>
                    </li>
                </ul>
            </div>
        </div>

        <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="#navbar_home" data-icon="grid">Home</a>
                    </li>
                    <li><a href="#navbar_settings" data-icon="star">Settings</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
